﻿<template>
  <baseUI :isShow="myConfig.isShow" label="" :showLabel="false" :commonConfig="commonConfig">
    <el-tabs v-model="activeName" type="border-card" v-if="isDesignMode">
      <el-tab-pane label="查询" name="query">
        <div style="padding:0 0 5px 0">
          <el-row :gutter="10">
            <el-col :span="22">
              <template v-if="myConfig.other.query">
                <el-input v-model="filter" v-if="myConfig.other.query.useDefault"></el-input>
                <template v-else>
                  <div style="border:1px dashed #999">
                    <draggable
                      style = "min-height: 50px;"
                      v-bind = "{group:{name: 'grid_'+ myConfig.uid, pull:true}, sort:true}"
                      v-model = "myConfig.other.query.conditions">
                      <template>
                        <div v-for="(el, i) in myConfig.other.query.conditions" :key = "i">
                          <div class="dynamic_single" @click.stop = "handleSelectComponent(el)">
                            <component :key="el.config.uid"
                              :ref="el.config.uid"
                              v-bind:is="el.componentName"
                              :config="el.config"
                              :commonConfig="commonConfig"
                              v-model="el.value"
                              :isDesignMode="true"
                              @onDesignEvent="handleEmbeddedDesignEvent"></component>
                          </div>
                          <div>
                            <el-button title = "删除" @click.stop = "handleQueryComponentDelete(i)" type = "danger" size = 'mini' round>
                              <i class="iconfont icon-shanchu"></i>
                            </el-button>
                          </div>
                        </div>
                      </template>
                    </draggable>
                    <add-component @addItem="addQueryItem"></add-component>
                  </div>
                </template>
              </template>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="onClickSearch">查询</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="query-content">
          <el-table v-if="myConfig.other.table"
            :data="tableData"
            style="width: 98%;"
            :max-height="myConfig.other.table.height?myConfig.other.table.height:'600'"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            border
            stripe
            :row-style="rowStyle"
            :cell-style="cellStyle"
            @sort-change="sortChange"
            @selection-change="handleSelectionChange"
            :highlight-current-row="myConfig.other.isHighlightCurrentRow"
            @current-change="handleTableCurrentChange"
            @row-click="handleRowClick"
            @row-dblclick="handleRowDbclick">
              <el-table-column v-if="myConfig.other.isSelection" align="center" type="selection" width="55"></el-table-column>
              <el-table-column v-if="myConfig.other.rowIndexStyle === 'front'" align="center" type="index" width="50"></el-table-column>
              <el-table-column v-if="myConfig.other.rowIndexStyle === 'server'" align="center" width="50">
              <template slot-scope="scope">
                {{scope.row.RowNumber}}
              </template>
            </el-table-column>
              <el-table-column v-for="(col, index) in tableColumns" :key="index"
                :prop="col.name"
                :label="col.label"
                :width="col.width?col.width:'auto'"
                :sortable="col.sortable && col.sortCustom ? 'custom':col.sortable"
                align="center">
                <template slot-scope="scope">
                  <template v-if="col.advance && col.advance.isActive && getAdvanceComponentName(scope.row, col) !== ''">
                    <template v-if="col.advance.isModel">
                      <component :is="getAdvanceComponentName(scope.row, col)" v-model="scope.row[col.name]" v-bind="getAdvanceComponentProps(scope.row, col)">
                        <template v-if="col.advance.showOriContent">
                          <template v-if="col._viewer.isComponent">
                            <component :key="col._viewer.component.config.uid"
                              :ref="col._viewer.component.config.uid"
                              v-bind:is="col._viewer.component.componentName"
                              :config="col._viewer.component.config"
                              :commonConfig="commonConfig"
                              :value.sync="scope.row[col.name]"
                              :isDesignMode="true"
                              @onDesignEvent="handleEmbeddedDesignEvent"></component>
                          </template>
                          <template v-else>
                            <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                            <span v-else>{{scope.row[col.name + '__text']}}</span>
                          </template>
                        </template>
                        <template v-else>
                          {{getAdvanceComponentText(scope.row, col)}}
                        </template>
                      </component>
                    </template>
                    <template v-else>
                      <component :is="getAdvanceComponentName(scope.row, col)" v-bind="getAdvanceComponentProps(scope.row, col)">
                        <template v-if="col.advance.showOriContent">
                          <template v-if="col._viewer.isComponent">
                            <component :key="col._viewer.component.config.uid"
                              :ref="col._viewer.component.config.uid"
                              v-bind:is="col._viewer.component.componentName"
                              :config="col._viewer.component.config"
                              :commonConfig="commonConfig"
                              :value.sync="scope.row[col.name]"
                              :isDesignMode="true"
                              @onDesignEvent="handleEmbeddedDesignEvent"></component>
                          </template>
                          <template v-else>
                            <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                            <span v-else>{{scope.row[col.name + '__text']}}</span>
                          </template>
                        </template>
                        <template v-else>
                          {{getAdvanceComponentText(scope.row, col)}}
                        </template>
                      </component>
                    </template>
                  </template>
                  <template v-else>
                    <template v-if="col._viewer.isComponent">
                      <component :key="col._viewer.component.config.uid"
                        :ref="col._viewer.component.config.uid"
                        v-bind:is="col._viewer.component.componentName"
                        :config="col._viewer.component.config"
                        :commonConfig="commonConfig"
                        :value.sync="scope.row[col.name]"
                        :isDesignMode="true"
                        @onDesignEvent="handleEmbeddedDesignEvent"></component>
                    </template>
                    <template v-else>
                      <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                      <span v-else>{{scope.row[col.name + '__text']}}</span>
                    </template>
                  </template>
                </template>
              </el-table-column>
              <el-table-column fixed="right" align="center" label="操作" v-if="showOperation">
                <template slot-scope="scope">
                  <template v-for="(item, index) in operationButtons(scope.row)" >
                    <el-button type="text" v-if="item.active" :key="index" @click="onRowButtonClick(scope.row, item, index)">{{item.name}}</el-button>
                  </template>
                  <el-dropdown v-if="operationMore(scope.row).length > 0" @command="handleMoreCommand">
                    <span class="el-dropdown-link">
                      更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="(c, index) in operationMore(scope.row)" :key="index" :command="{index: index, setting: c, row: scope.row}">{{c.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
          </el-table>
        </div>
        <div style="padding: 10px 0 0 0">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync = "page"
              :page-size = 'pageSize'
              :pager-count = "5"
              :page-sizes = "[10, 25, 50, 100]"
              layout = "total, sizes, prev, pager, next"
              :total = 'rowTotal'>
            </el-pagination>
        </div>
        <div style="padding: 10px 0 0 0">
          <template v-for="(item, index) in bottomButtons()" >
            <el-button :type="item.type" v-if="item.active" :key="index" @click="onButtonClick(item, index)" :icon="item.leftIcon">{{item.name}}<i v-if="item.rigthIcon" :class="item.rigthIcon"></i></el-button>
          </template>
          <el-button-group>
            <template v-for="(item, index) in bottomButtonsGroup()" >
              <el-button :type="item.type" round v-if="item.active" :key="index" @click="onButtonClick(item, index)" :icon="item.leftIcon">{{item.name}}<i v-if="item.rigthIcon" :class="item.rigthIcon"></i></el-button>
            </template>
          </el-button-group>
        </div>
      </el-tab-pane>
      <el-tab-pane label="编辑" name="edit">
        <draggable
          style = "min-height: 50px;"
          v-bind = "{group:{name: 'metaQuery'+ myConfig.uid, pull:true}, sort:true}"
          v-model = "myConfig.other.table.editForm.children"
          v-if="myConfig.other.table && myConfig.other.table.editForm">
          <template>
            <div v-for="(el, i) in myConfig.other.table.editForm.children" :key = "i">
              <div class="dynamic_single" @click.stop = "handleSelectComponent(el)">
                <component :key="el.config.uid"
                :ref="el.config.uid"
                v-bind:is="el.componentName"
                :config="el.config"
                :commonConfig="commonConfig"
                :value.sync="el.value"
                :isDesignMode="true"
                @onDesignEvent="handleEmbeddedDesignEvent"></component>
              </div>
              <div>
                <el-button title = "删除" @click.stop = "handleComponentDelete(i)" type = "danger" size = 'mini' round>
                  <i class="iconfont icon-shanchu"></i>
                </el-button>
              </div>
            </div>
          </template>
        </draggable>
        <add-component @addItem="addEditItem"></add-component>
      </el-tab-pane>
      <el-tab-pane label="新增" name="add">
        <draggable
          style = "min-height: 50px;"
          v-bind = "{group:{name: 'metaQuery'+ myConfig.uid, pull:true}, sort:true}"
          v-model = "myConfig.other.table.addForm.children"
          v-if="myConfig.other.table && myConfig.other.table.addForm">
          <template>
            <div v-for="(el, i) in myConfig.other.table.addForm.children" :key = "i">
              <div class="dynamic_single" @click.stop = "handleSelectComponent(el)">
                <component :key="el.config.uid"
                :ref="el.config.uid"
                v-bind:is="el.componentName"
                :config="el.config"
                :commonConfig="commonConfig"
                :value.sync="el.value"
                :isDesignMode="true"
                @onDesignEvent="handleEmbeddedDesignEvent"></component>
              </div>
              <div>
                <el-button title = "删除" @click.stop = "handleAddComponentDelete(i)" type = "danger" size = 'mini' round>
                  <i class="iconfont icon-shanchu"></i>
                </el-button>
              </div>
            </div>
          </template>
        </draggable>
        <add-component @addItem="addAddItem"></add-component>
      </el-tab-pane>
      <el-tab-pane label="明细查看" name="detail">
        <draggable
          style = "min-height: 50px;"
          v-bind = "{group:{name: 'metaQuery'+ myConfig.uid, pull:true}, sort:true}"
          v-model = "myConfig.other.table.detailForm.children"
          v-if="myConfig.other.table && myConfig.other.table.detailForm">
          <template>
            <div v-for="(el, i) in myConfig.other.table.detailForm.children" :key = "i">
              <div class="dynamic_single" @click.stop = "handleSelectComponent(el)">
                <component :key="el.config.uid"
                :ref="el.config.uid"
                v-bind:is="el.componentName"
                :config="el.config"
                :commonConfig="commonConfig"
                :value.sync="el.value"
                :isDesignMode="true"
                @onDesignEvent="handleEmbeddedDesignEvent"></component>
              </div>
              <div>
                <el-button title = "删除" @click.stop = "handleDetailComponentDelete(i)" type = "danger" size = 'mini' round>
                  <i class="iconfont icon-shanchu"></i>
                </el-button>
              </div>
            </div>
          </template>
        </draggable>
        <add-component @addItem="addDetailItem"></add-component>
      </el-tab-pane>
    </el-tabs>
    <template v-else>
      <div style="padding:0 0 5px 0">
        <el-row :gutter="10">
          <el-col :span="22">
            <template v-if="myConfig.other.query">
              <el-input v-model="filter" clearable v-if="myConfig.other.query.useDefault" @keyup.enter.native="onClickSearch"></el-input>
              <template v-else>
                <div v-for="(el, i) in myConfig.other.query.conditions" :key = "i">
                  <component :key="el.config.uid"
                    :ref="el.config.uid"
                    v-bind:is="el.componentName"
                    :config="el.config"
                    :events="el.events"
                    :commonConfig="commonConfig"
                    :value.sync="el.value"
                    :isDesignMode="false"
                    :pageModel.sync="queryModel"
                    :pageControl.sync="meControl"
                    :parentControl.sync="parentControl"
                    :parentModel="parentModel"
                    @onRuntimeEvent="onRuntimeEvent"
                    @keyup.enter.native="onClickSearch"></component>
                </div>
              </template>
            </template>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="onClickSearch">查询</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="query-content">
        <el-table v-if="myConfig.other.table"
          :data="tableData"
          style="width: 98%;"
          :max-height="myConfig.other.table.height?myConfig.other.table.height:'600'"
          :show-summary="showSummary"
          :summary-method="getSummaries"
          border
          stripe
          :row-style="rowStyle"
          :cell-style="cellStyle"
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
          :highlight-current-row="myConfig.other.isHighlightCurrentRow"
          @current-change="handleTableCurrentChange"
          @row-click="handleRowClick"
          @row-dblclick="handleRowDbclick">
            <el-table-column v-if="myConfig.other.isSelection" align="center" type="selection" width="55"></el-table-column>
            <el-table-column v-if="myConfig.other.rowIndexStyle === 'front'" align="center" type="index" width="50"></el-table-column>
            <el-table-column v-if="myConfig.other.rowIndexStyle === 'server'" align="center" width="50">
              <template slot-scope="scope">
                {{scope.row.RowNumber}}
              </template>
            </el-table-column>
            <el-table-column v-for="(col, index) in tableColumns" :key="index"
              :prop="col.name"
              :label="col.label"
              :width="col.width?col.width:'auto'"
              :sortable="col.sortable && col.sortCustom ? 'custom':col.sortable"
              align="center">
              <template slot-scope="scope">
                <template v-if="col.advance && col.advance.isActive && getAdvanceComponentName(scope.row, col) !== ''">
                  <template v-if="col.advance.isModel">
                    <component :is="getAdvanceComponentName(scope.row, col)" v-model="scope.row[col.name]" v-bind="getAdvanceComponentProps(scope.row, col)">
                      <template v-if="col.advance.showOriContent">
                        <template v-if="col._viewer.isComponent">
                          <component :key="col._viewer.component.config.uid"
                            v-bind:is="col._viewer.component.componentName"
                            :config="col._viewer.component.config"
                            :commonConfig="commonConfig"
                            :value.sync="scope.row[col.name]"
                            :isDesignMode="false"
                            @onDesignEvent="handleEmbeddedDesignEvent"></component>
                        </template>
                        <template v-else>
                          <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                          <span v-else>{{scope.row[col.name + '__text']}}</span>
                        </template>
                      </template>
                      <template v-else>
                        {{getAdvanceComponentText(scope.row, col)}}
                      </template>
                    </component>
                  </template>
                  <template v-else>
                    <component :is="getAdvanceComponentName(scope.row, col)" v-bind="getAdvanceComponentProps(scope.row, col)">
                      <template v-if="col.advance.showOriContent">
                        <template v-if="col._viewer.isComponent">
                          <component :key="col._viewer.component.config.uid"
                            v-bind:is="col._viewer.component.componentName"
                            :config="col._viewer.component.config"
                            :commonConfig="commonConfig"
                            :value.sync="scope.row[col.name]"
                            :isDesignMode="false"
                            @onDesignEvent="handleEmbeddedDesignEvent"></component>
                        </template>
                        <template v-else>
                          <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                          <span v-else>{{scope.row[col.name + '__text']}}</span>
                        </template>
                      </template>
                      <template v-else>
                        {{getAdvanceComponentText(scope.row, col)}}
                      </template>
                    </component>
                  </template>
                </template>
                <template v-else>
                  <template v-if="col._viewer.isComponent">
                    <component :key="col._viewer.component.config.uid"
                      v-bind:is="col._viewer.component.componentName"
                      :config="col._viewer.component.config"
                      :commonConfig="commonConfig"
                      :value.sync="scope.row[col.name]"
                      :isDesignMode="false"
                      @onDesignEvent="handleEmbeddedDesignEvent"></component>
                  </template>
                  <template v-else>
                    <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                    <span v-else>{{scope.row[col.name + '__text']}}</span>
                  </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" v-if="showOperation">
              <template slot-scope="scope">
                <template v-for="(item, index) in operationButtons(scope.row)" >
                  <el-button type="text" v-if="item.active" :key="index" @click="onRowButtonClick(scope.row, item, index)">{{item.name}}</el-button>
                </template>
                <el-dropdown v-if="operationMore(scope.row).length > 0" @command="handleMoreCommand">
                  <span class="el-dropdown-link">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(c, index) in operationMore(scope.row)" :key="index" :command="{index: index, setting: c, row: scope.row}">{{c.name}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
        </el-table>
      </div>
      <div style="padding: 10px 0 0 0">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync = "page"
            :page-size = 'pageSize'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'rowTotal'>
          </el-pagination>
      </div>
      <div style="padding: 10px 0 0 0">
        <template v-for="(item, index) in bottomButtons()" >
          <el-button :type="item.type" v-if="item.active" :key="index" @click="onButtonClick(item, index)" :icon="item.leftIcon">{{item.name}}<i v-if="item.rigthIcon" :class="item.rigthIcon"></i></el-button>
        </template>
        <el-button-group>
          <template v-for="(item, index) in bottomButtonsGroup()" >
            <el-button :type="item.type" round v-if="item.active" :key="index" @click="onButtonClick(item, index)" :icon="item.leftIcon">{{item.name}}<i v-if="item.rigthIcon" :class="item.rigthIcon"></i></el-button>
          </template>
        </el-button-group>
      </div>
      <el-dialog v-drag
        :title="popTitle"
        :closeOnClickModal="false"
        :visible.sync="showPop"
        append-to-body
        width="50%"
        class="pop"
        v-if="myConfig.other.table && myConfig.other.table.editForm"
        :before-close="handleShowPopClose">
        <div style="padding:0 10px 10px 10px" v-for="(el, i) in myConfig.other.table.editForm.children" :key = "i">
          <component :key="el.config.uid"
            :ref="el.config.uid"
            v-bind:is="el.componentName"
            :config="el.config"
            :events="el.events"
            :commonConfig="commonConfig"
            :value.sync="el.value"
            :isDesignMode="false"
            :pageModel.sync="curRowModel"
            :pageControl.sync="popControl"
            :parentControl.sync="meControl"
            :parentModel="parentModel"
            @onRuntimeEvent="onRuntimeEvent"></component>
        </div>
      </el-dialog>
      <el-dialog v-drag
        :title="popAddTitle"
        :closeOnClickModal="false"
        :visible.sync="showPopAdd"
        append-to-body
        width="50%"
        class="pop"
        v-if="myConfig.other.table && myConfig.other.table.addForm"
        :before-close="handleShowPopAddClose">
        <div style="padding:0 10px 10px 10px" v-for="(el, i) in myConfig.other.table.addForm.children" :key = "i">
          <component :key="el.config.uid"
            :ref="el.config.uid"
            v-bind:is="el.componentName"
            :config="el.config"
            :events="el.events"
            :commonConfig="commonConfig"
            :value.sync="el.value"
            :isDesignMode="false"
            :pageModel.sync="curAddModel"
            :pageControl.sync="popControl"
            :parentControl.sync="meControl"
            :parentModel="parentModel"
            @onRuntimeEvent="onRuntimeEvent"></component>
        </div>
      </el-dialog>
      <el-dialog v-drag
        :title="popTitle"
        :closeOnClickModal="false"
        :visible.sync="showPopDetail"
        append-to-body
        width="50%"
        class="pop"
        v-if="myConfig.other.table && myConfig.other.table.detailForm"
        :before-close="handleShowPopDetailClose">
        <div style="padding:0 10px 10px 10px" v-for="(el, i) in myConfig.other.table.detailForm.children" :key = "i">
          <component :key="el.config.uid"
            :ref="el.config.uid"
            v-bind:is="el.componentName"
            :config="el.config"
            :events="el.events"
            :commonConfig="commonConfig"
            :value.sync="el.value"
            :isDesignMode="false"
            :pageModel.sync="curViewModel"
            :pageControl.sync="popControl"
            :parentControl.sync="meControl"
            :parentModel="parentModel"
            @onRuntimeEvent="onRuntimeEvent"></component>
        </div>
      </el-dialog>
    </template>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
import Draggable from 'vuedraggable'
import addComponent from '../addComponent.vue'
import {commonUse_defaultMethod, excuteJS} from '../../commonUse'
import {getTableColumnViewerByMetaColumnInfo} from '../common'
export default {
  components: {
    baseComponent, baseUI, addComponent, Draggable
  },
  extends: baseComponent,
  mounted () {
    if (!this.isDesignMode) {
      this.load()
    }
  },
  data () {
    return {
      filter: '',
      activeName: 'query',
      tableData: [],
      page: 1,
      pageSize: 10,
      rowTotal: 0,
      sortExpress: {},
      popTitle: '',
      popAddTitle: '',
      showPop: false,
      showPopAdd: false,
      showPopDetail: false,
      curRowModel: {},
      curAddModel: {},
      curViewModel: {},
      queryModel: {},
      popControl: {
        showInnerPop: false,
        innerPageUid: '',
        innerRowData: {},
        showOutPop: false,
        outPopUrl: '',
        refreshPage: false,
        reset: false
      },
      meControl: {
        showInnerPop: false,
        innerPageUid: '',
        innerRowData: {},
        showOutPop: false,
        outPopUrl: '',
        refreshPage: false,
        reset: false
      }
    }
  },
  methods: {
    isDataComponent () {
      return true
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.load()
    },
    handleCurrentChange (val) {
      this.page = val
      this.load()
    },
    load (data) {
      if (this.myConfig.other.table.metaUid) {
        let fixed_filter_express = {}
        let other_condition_express = {}
        let filter_column = ''
        let filter_value = ''
        let self = this
        if (this.myConfig.other.query) {
          if (this.myConfig.other.query.useDefault) {
            filter_column = this.myConfig.other.query.filterColumns.join(',')
            filter_value = this.filter
          } else {
            if (this.queryModel) {
              let keys = Object.keys(this.queryModel)
              keys.forEach(k => {
                if (this.queryModel[k].value && this.queryModel[k].value !== '') {
                  if (other_condition_express[k]) {
                    other_condition_express[k] = {}
                  }
                  if (this.queryModel[k].componentName === 'DateRangePicker' ||
                    this.queryModel[k].componentName === 'DateTimeRangePicker' ||
                    this.queryModel[k].componentName === 'MonthRangePicker' ||
                    this.queryModel[k].componentName === 'TimeRangePicker') {
                    other_condition_express[k] = {
                      '$gte': this.queryModel[k].value[0],
                      '$lte': this.queryModel[k].value[1]
                    }
                  } else if (this.queryModel[k].componentName === 'SelectInput' &&
                  this.queryModel[k].component.config.other.isMulti) {
                    other_condition_express[k] = {
                      '$in': this.queryModel[k].value
                    }
                  } else if (this.queryModel[k].componentName === 'TextInput') {
                    other_condition_express[k] = {
                      '$like': this.queryModel[k].value
                    }
                  } else {
                    other_condition_express[k] = this.queryModel[k].value
                  }
                }
              })
            }
          }
          this.myConfig.other.query.fixed_filter.forEach(el => {
            if (el.key) {
              if (!fixed_filter_express[el.key]) {
                fixed_filter_express[el.key] = {}
              }
              fixed_filter_express[el.key][el.op] = commonUse_defaultMethod(el.value, self.getDataObjFromPageModel(), null, null, self.parentModel)
            }
          })
          if (!self.sortExpress || Object.keys(self.sortExpress) <= 0) {
            self.sortExpress = {}
            this.myConfig.other.query.fixed_orderby.forEach(el => {
              if (el.key) {
                self.sortExpress[el.key] = el.order
              }
            })
          }
        }
        this.$api.mdFormQuery({
          id: this.myConfig.other.table.metaUid,
          limit: this.pageSize,
          page: this.page,
          filter_column: filter_column,
          filter_value: filter_value,
          fixed_orderby_express: this.sortExpress,
          fixed_filter_express: fixed_filter_express,
          other_condition_express: other_condition_express
        }).then(data => {
          this.tableData = data.data
          this.page = data.page
          this.pageSize = data.limit
          this.rowTotal = data.total_count
        })
      }
    },
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      sums[0] = '合计'
      columns.forEach((col, index) => {
        if (index > 0) {
          let cinfo = this.myConfig.other.table.columns.find(item => {
            return item.name === col.property
          })
          if (cinfo && cinfo.showSummary) {
            let v = 0.0
            data.forEach((d) => {
              v += d[col.property]
            })
            if (col.data_type === 'int') {
              sums[index] = parseInt(v)
            } else {
              sums[index] = v
            }
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    sortChange (e) {
      var col = this.myConfig.other.table.columns.find(item => {
        return item.name === e.prop
      })
      if (col && col.sortCustom) {
        this.sortExpress = {}
        if (e.order) {
          if (e.order && e.order === 'ascending') {
            this.sortExpress[e.prop] = 'asc'
          } else {
            this.sortExpress[e.prop] = 'desc'
          }
        }
        this.load()
      }
    },
    onClickSearch () {
      this.load()
    },
    onClickAdd () {
      if (this.isDesignMode) {
        this.activeName = 'add'
      } else {
        this.popAddTitle = '新增'
        let self = this
        if (!self.curAddModel || Object.keys(self.curAddModel).length <= 0) {
          this.$nextTick(() => {
            var keys = Object.keys(self.curAddModel)
            keys.forEach(k => {
              self.curAddModel[k].component.setValue('')
            })
          })
        } else {
          var keys = Object.keys(self.curAddModel)
          keys.forEach(k => {
            if (self.curAddModel[k].component) {
              self.curAddModel[k].component.setValue('')
            }
          })
        }
        this.showPopAdd = true
        this.meControl.showInnerPop = true
      }
    },
    onRowButtonClick (row, setting, index) {
      setting.actions.sort((a, b) => {
        return a.sort - b.sort
      })
      let actionIndex = 0
      let self = this
      let doNextAction = function () {
        if (actionIndex < setting.actions.length) {
          let action = setting.actions[actionIndex]
          actionIndex++
          if (action.action === 'api') {
            if (self.isDesignMode) return
            self.excuteAPI(action.settings, row, doNextAction)
          } else if (action.action === 'pop') {
            if (self.isDesignMode) return
            self.popPage(action.settings, row, doNextAction)
          } else if (action.action === 'redirect') {
            if (self.isDesignMode) return
            self.redirectPage(action.settings, row, doNextAction)
          } else if (action.action === 'script') {
            if (self.isDesignMode) return
            self.excuteScript(action.settings, row, doNextAction)
          } else if (action.action === 'metaDelete') {
            if (self.isDesignMode) return
            action.settings['meta_uid'] = self.myConfig.other.table.metaUid
            self.excuteMetaDelete(action.settings, row, doNextAction)
          } else if (action.action === 'metaRemove') {
            if (self.isDesignMode) return
            action.settings['meta_uid'] = self.myConfig.other.table.metaUid
            self.excuteMetaRemove(action.settings, row, doNextAction)
          } else if (action.action === 'metaActive') {
            if (self.isDesignMode) return
            action.settings['meta_uid'] = self.myConfig.other.table.metaUid
            self.excuteMetaActive(action.settings, row, doNextAction)
          } else if (action.action === 'metaDeactive') {
            if (self.isDesignMode) return
            action.settings['meta_uid'] = self.myConfig.other.table.metaUid
            self.excuteMetaDeactive(action.settings, row, doNextAction)
          } else if (action.action === 'default') {
            // 新增、编辑
            if (setting.code === '__edit') {
              if (!self.isDesignMode) {
                self.popTitle = setting.name
                self.showPop = true
                self.meControl.showInnerPop = true
                if (!self.curRowModel || Object.keys(self.curRowModel).length <= 0) {
                  self.$nextTick(() => {
                    var keys = Object.keys(self.curRowModel)
                    keys.forEach(k => {
                      self.curRowModel[k].component.setValue(row[k])
                    })
                    self.curRowModel['_default_pk'] = {
                      value: row['_default_pk']
                    }
                    doNextAction()
                  })
                } else {
                  var keys = Object.keys(self.curRowModel)
                  keys.forEach(k => {
                    if (self.curRowModel[k].component) {
                      self.curRowModel[k].component.setValue(row[k])
                    }
                  })
                  self.curRowModel['_default_pk'] = {
                    value: row['_default_pk']
                  }
                  doNextAction()
                }
              } else {
                self.activeName = 'edit'
                doNextAction()
              }
            } else if (setting.code === '__detail') {
              if (!self.isDesignMode) {
                self.popTitle = setting.name
                self.showPopDetail = true
                self.meControl.showInnerPop = true
                if (!self.curViewModel || Object.keys(self.curViewModel).length <= 0) {
                  self.$nextTick(() => {
                    let keys = Object.keys(self.curViewModel)
                    keys.forEach(k => {
                      self.curViewModel[k].component.setValue(row[k])
                    })
                    self.curViewModel['_default_pk'] = {
                      value: row['_default_pk']
                    }
                    doNextAction()
                  })
                } else {
                  let keys = Object.keys(self.curViewModel)
                  keys.forEach(k => {
                    if (self.curViewModel[k].component) {
                      self.curViewModel[k].component.setValue(row[k])
                    }
                  })
                  console.debug(self.curViewModel)
                  self.curViewModel['_default_pk'] = {
                    value: row['_default_pk']
                  }
                  doNextAction()
                }
              } else {
                self.activeName = 'detail'
                doNextAction()
              }
            }
          }
        }
      }
      doNextAction()
    },
    onButtonClick (setting, index) {
      setting.actions.sort((a, b) => {
        return a.sort - b.sort
      })
      let actionIndex = 0
      let self = this
      let doNextAction = function () {
        if (actionIndex < setting.actions.length) {
          let action = setting.actions[actionIndex]
          actionIndex++
          if (action.action === 'api') {
            if (self.isDesignMode) return
            self.excuteAPI(action.settings, null, doNextAction)
          } else if (action.action === 'pop') {
            if (self.isDesignMode) return
            self.popPage(action.settings, null, doNextAction)
          } else if (action.action === 'redirect') {
            if (self.isDesignMode) return
            self.redirectPage(action.settings, null, doNextAction)
          } else if (action.action === 'script') {
            if (self.isDesignMode) return
            self.excuteScript(action.settings, null, doNextAction)
          } else if (action.action === 'export') {
            if (self.isDesignMode) return
            self.handleExport(doNextAction)
          } else if (action.action === 'default') {
            // 新增
            if (setting.code === 'add') {
              self.onClickAdd()
              doNextAction()
            }
          }
        }
      }
      doNextAction()
    },
    handleMoreCommand (command) {
      if (command) {
        this.onRowButtonClick(command.row, command.setting, command.index)
      }
    },
    handleShowPopClose () {
      this.showPop = false
    },
    handleShowPopAddClose () {
      this.showPopAdd = false
    },
    handleShowPopDetailClose () {
      this.showPopDetail = false
    },
    handleExport (nextAction) {
      let self = this
      if (this.myConfig.other.table.metaUid) {
        let fixed_filter_express = {}
        let filter_column = ''
        let filter_value = ''
        let other_condition_express = {}
        let fixed_orderby = {}
        let query_columns = []
        let query_column_header = []
        if (this.myConfig.other.query) {
          if (this.myConfig.other.query.useDefault) {
            filter_column = this.myConfig.other.query.filterColumns.join(',')
            filter_value = this.filter
          } else {
            if (this.queryModel) {
              let keys = Object.keys(this.queryModel)
              keys.forEach(k => {
                if (this.queryModel[k].value && this.queryModel[k].value !== '') {
                  if (other_condition_express[k]) {
                    other_condition_express[k] = {}
                  }
                  if (this.queryModel[k].componentName === 'DateRangePicker' ||
                    this.queryModel[k].componentName === 'DateTimeRangePicker' ||
                    this.queryModel[k].componentName === 'MonthRangePicker' ||
                    this.queryModel[k].componentName === 'TimeRangePicker') {
                    other_condition_express[k] = {
                      '$gte': this.queryModel[k].value[0],
                      '$lte': this.queryModel[k].value[1]
                    }
                  } else if (this.queryModel[k].componentName === 'SelectInput' &&
                  this.queryModel[k].component.config.other.isMulti) {
                    other_condition_express[k] = {
                      '$in': this.queryModel[k].value
                    }
                  } else if (this.queryModel[k].componentName === 'TextInput') {
                    other_condition_express[k] = {
                      '$like': this.queryModel[k].value
                    }
                  } else {
                    other_condition_express[k] = this.queryModel[k].value
                  }
                }
              })
            }
          }
          this.myConfig.other.query.fixed_filter.forEach(el => {
            if (el.key) {
              if (!fixed_filter_express[el.key]) {
                fixed_filter_express[el.key] = {}
              }
              fixed_filter_express[el.key][el.op] = commonUse_defaultMethod(el.value, self.getDataObjFromPageModel(), null, null, self.parentModel)
            }
          })
          this.myConfig.other.query.fixed_orderby.forEach(el => {
            if (el.key) {
              fixed_orderby[el.key] = el.order
            }
          })
          this.myConfig.other.table.columns.forEach(el => {
            query_columns.push(el.name)
            query_column_header.push(el.label)
          })
        }

        self.$api.mdFormExport({
          id: this.myConfig.other.table.metaUid,
          filter_column: filter_column,
          filter_value: filter_value,
          query_columns: query_columns.join(','),
          query_column_header: query_column_header.join(','),
          fixed_filter_express: fixed_filter_express,
          fixed_orderby_express: fixed_orderby,
          other_condition_express: other_condition_express
        }).then(data => {
          if (nextAction) nextAction()
        })
      }
    },
    addEditItem (item) {
      let d = item
      d.config.other.parentUid = this.myConfig.uid
      this.myConfig.other.table.editForm.children.push(d)
      this.handleSelectComponent(this.myConfig.other.table.editForm.children[this.myConfig.other.table.editForm.children.length - 1])
    },
    addAddItem (item) {
      let d = item
      d.config.other.parentUid = this.myConfig.uid
      this.myConfig.other.table.addForm.children.push(d)
      this.handleSelectComponent(this.myConfig.other.table.addForm.children[this.myConfig.other.table.addForm.children.length - 1])
    },
    addDetailItem (item) {
      let d = item
      d.config.other.parentUid = this.myConfig.uid
      this.myConfig.other.table.detailForm.children.push(d)
      this.handleSelectComponent(this.myConfig.other.table.detailForm.children[this.myConfig.other.table.detailForm.children.length - 1])
    },
    addQueryItem (item) {
      let d = item
      d.config.other.parentUid = this.myConfig.uid
      this.myConfig.other.query.conditions.push(d)
      this.handleSelectComponent(this.myConfig.other.query.conditions[this.myConfig.other.query.conditions.length - 1])
    },
    handleComponentDelete (index) {
      this.myConfig.other.table.editForm.children.splice(index, 1)
    },
    handleAddComponentDelete (index) {
      this.myConfig.other.table.addForm.children.splice(index, 1)
    },
    handleDetailComponentDelete (index) {
      this.myConfig.other.table.detailForm.children.splice(index, 1)
    },
    handleEmbeddedDesignEvent (event, sender, targetData) {
      this.$emit('onDesignEvent', event, sender, targetData)
    },
    handleSelectComponent (item) {
      this.onDesignEvent('selectItem', item)
    },
    onRuntimeEvent (event, data) {
      // this.$emit('onRuntimeEvent', event, data)
    },
    handleQueryComponentDelete (index) {
      this.myConfig.other.query.conditions.splice(index, 1)
    },
    handleSelectionChange (val) {
      this.setValue(val)
    },
    handleTableCurrentChange (val) {
      let arr = []
      arr.push(val)
      this.setValue(arr)
    },
    handleRowClick (row, column, event) {
      let index = -1
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i]._default_pk === row._default_pk) {
          index = i
          break
        }
      }
      this.onRowClick(row, index)
    },
    handleRowDbclick (row, column, event) {
      let index = -1
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i]._default_pk === row._default_pk) {
          index = i
          break
        }
      }
      this.onRowDClick(row, index)
    },
    rowStyle (e) {
      let rtn = {}
      if (this.myConfig.other.highLight.isShow) {
        let js = 'var r=' + JSON.stringify(e.row)
        js += '\nvar result=false;'
        js += this.myConfig.other.highLight.script
        js += '\nreturn result;'
        let re = excuteJS(js)
        if (re) {
          rtn['background-color'] = this.myConfig.other.highLight.color + '!important'
        }
      }
      return rtn
    },
    cellStyle (e) {
      let rtn = {}
      if (this.myConfig.other.highLight.isShow) {
        let js = 'var r=' + JSON.stringify(e.row)
        js += '\nvar result=false;'
        js += this.myConfig.other.highLight.script
        js += '\nreturn result;'
        let re = excuteJS(js)
        if (re) {
          rtn['background-color'] = this.myConfig.other.highLight.color + '!important'
        }
      }
      return rtn
    },
    getAdvanceComponentName (row, setting) {
      if (!setting) return ''
      let js = 'var r=' + JSON.stringify(row)
      js += '\nvar result={componentName: "", props: {}};'
      js += setting.advance.script
      js += '\nreturn result;'
      let re = excuteJS(js)
      if (re && re.componentName) {
        return re.componentName
      } else {
        return ''
      }
    },
    getAdvanceComponentProps (row, setting) {
      if (!setting) return ''
      let js = 'var r=' + JSON.stringify(row)
      js += '\nvar result={componentName: "", props: {}};'
      js += setting.advance.script
      js += '\nreturn result;'
      let re = excuteJS(js)
      if (re && re.props) {
        return re.props
      } else {
        return {}
      }
    },
    getAdvanceComponentText (row, setting) {
      if (!setting) return ''
      let js = 'var r=' + JSON.stringify(row)
      js += '\nvar result={componentName: "", props: {}};'
      js += setting.advance.script
      js += '\nreturn result;'
      let re = excuteJS(js)
      if (re && re.text) {
        return re.text
      } else {
        return ''
      }
    }
  },
  computed: {
    // 计算属性的 getter
    tableColumns: function () {
      // `this` 指向 vm 实例
      let list = this.myConfig.other.table.columns.filter(col => {
        return col.visible
      })
      list.sort((a, b) => {
        return a.sort - b.sort
      })
      list.forEach(item => {
        item._viewer = getTableColumnViewerByMetaColumnInfo(item)
      })
      return list
    },
    showSummary: function () {
      let list = this.myConfig.other.table.columns.filter(col => {
        return col.showSummary
      })
      return list.length > 0
    },
    showOperation: function () {
      let list = this.myConfig.other.table.operations.filter(col => {
        return col.active
      })
      return list.length > 0
    },
    operationButtons: function () {
      return (row) => {
        let list = this.myConfig.other.table.operations.filter(col => {
          let js = 'var r=' + JSON.stringify(row)
          js += '\nvar result=true;'
          js += col.script
          js += '\nreturn result;'
          let re = excuteJS(js)
          return !col.toMore & re
        })
        return list
      }
    },
    operationMore: function () {
      return (row) => {
        let list = this.myConfig.other.table.operations.filter(col => {
          let js = 'var r=' + JSON.stringify(row)
          js += '\nvar result=true;'
          js += col.script
          js += '\nreturn result;'
          let re = excuteJS(js)
          return col.toMore & re
        })
        return list
      }
    },
    bottomButtons: function () {
      return () => {
        if (this.myConfig.other.bottomButtons) {
          let list = this.myConfig.other.bottomButtons.buttons.filter(col => {
            return !col.toGroup
          })
          return list
        } else {
          return []
        }
      }
    },
    bottomButtonsGroup: function () {
      return () => {
        if (this.myConfig.other.bottomButtons) {
          let list = this.myConfig.other.bottomButtons.buttons.filter(col => {
            return col.toGroup
          })
          return list
        } else {
          return []
        }
      }
    }
  },
  watch: {
    'myConfig.other.table.metaUid': {
      handler: function (val, oldVal) {
        if (this.isDesignMode) {
          this.load()
        }
      },
      deep: true
    },
    'meControl.showInnerPop': {
      handler: function (val, oldVal) {
        if (!val) {
          this.showPop = false
          this.showPopAdd = false
        }
      },
      deep: true
    },
    'meControl.refreshPage': {
      handler: function (val, oldVal) {
        if (val) {
          this.meControl.refreshPage = false
          this.load()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.query-content {
  display: flex;
  padding: 10px 0 0 0;
  justify-content: center;
  .c2 {
    width: 100%;
  }
}
.query-label {
  float:left;
}
.query-input {
  float: right;
}
.pop {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
</style>
